<template>
  <div class="container">
    <div class="title">
      <el-row :gutter="20">
        <el-col :span="16" :offset="0">
          {{cinfo.uname}}——{{cinfo.pname}}——{{cinfo.cname}}
        </el-col>
        <el-col :span="8" :offset="0">
          <div class="right">
            <el-button type="primary" size="medium" @click="projectInfo">项目信息</el-button>
            <el-button type="primary" size="medium" @click="contractInfo">合同信息</el-button>
            <el-button type="primary" size="medium" @click="toBack">返回</el-button>
          </div>
        </el-col>
      </el-row>
    </div>

    <div style="margin-bottom:10px">
      <el-row :gutter="20">
        <el-form :model="serachlist" :inline="false" size="medium">
          <el-col :span="6" :offset="0">
            <el-form-item label="">
              <el-input v-model="serachlist.device_name" placeholder="设备名称" clearable></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6" :offset="0">
            <el-form-item label="">
              <el-input v-model="serachlist.device_model" placeholder="设备型号" clearable></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6" :offset="0">
            <el-form-item label="">
              <el-date-picker v-model="serachlist.purchase_time" type="date" value-format="yyyy-MM-dd"
                placeholder="购置时间" :clearable="true" class="wid">
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-form>
        <el-col :span="6" :offset="0">
          <div class="right" style="margin-right:10px">
            <el-button type="primary" size="medium" @click="search" :loading="saveLoading">查询</el-button>
            <el-button type="primary" size="medium" @click="checkSwitch = !checkSwitch"
              :icon="checkSwitch?'el-icon-remove-outline':'el-icon-circle-plus-outline'">{{checkSwitch?'关闭表格':'展开表格'}}
            </el-button>
          </div>
        </el-col>
      </el-row>
      <el-row :gutter="20" v-if="checkSwitch">
        <el-col :span="24" :offset="0">
          <el-checkbox v-for="item in tableList" v-model="item.type" :label="item.label" :key="item.id" size="medium"
            style="padding:10px">
          </el-checkbox>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="20" :offset="0">
          <el-radio-group v-model="tableType" size="medium">
            <el-radio-button label="1" border>全部</el-radio-button>
            <el-radio-button label="2" border>软件运维</el-radio-button>
            <el-radio-button label="3" border>硬件运维</el-radio-button>
            <el-radio-button label="4" border>购买服务</el-radio-button>
          </el-radio-group>
        </el-col>
        <el-col :span="4" :offset="0">
          <div class="right">
            <el-button type="green" size="medium" @click="verifyMessages()" v-if="this.switch">修改选中项</el-button>
          </div>
        </el-col>
      </el-row>
    </div>

    <el-table :data="tableData" ref="tableData" border stripe :max-height="offsetHeight" v-loading="loading">
      <el-table-column type="selection" width="50" align="center">
      </el-table-column>
      <el-table-column type="index" label="序号" width="50" align="center">
      </el-table-column>
      <template v-for="col in tableList">
        <el-table-column :prop="col.id" :key="col.id" :label="col.label" :width="col.width" v-if="col.type"
          align="center" show-overflow-tooltip>
          <template slot-scope="{row}">
            <span v-if="col.id=='status'">{{row.status |f_runType}}</span>
            <span v-else-if="col.id=='device_type'"> {{row.device_type | f_ITtypeRename}}</span>
            <span v-else-if=" col.id=='purchase_time'"> {{$util.formatDate(row.purchase_time)}}</span>
            <span v-else-if=" col.id=='service_type'"> {{row.service_type | f_ITtypeRename}}</span>
            <span v-else-if=" col.id=='buy_type'"> {{row.buy_type | f_buildType}}</span>
            <span v-else>{{row[col.id]}}</span>
          </template>
        </el-table-column>
      </template>
      <el-table-column prop="" label=" 操作" align="center" width="200" fixed="right">
        <template slot-scope="{row}">
          <el-button-group>
            <el-button type="primary" size="mini" @click="deviceInfo(row.id)" v-if="row.device_type">查看信息
            </el-button>
            <el-button type="primary" size="mini" @click="serveInfo(row.id)" v-else>查看信息</el-button>
            <el-button type="green" size="mini" @click="verifyMessage(row)" v-if="tableSwitch">审核意见</el-button>
          </el-button-group>
        </template>
      </el-table-column>
    </el-table>

    <!-- 项目信息 -->
    <el-drawer title="项目信息" :visible.sync="projectShow" size="70%" center :destroy-on-close="true"
      :wrapperClosable="false">
      <project-item :project-params="projectParams" @cancel="cancel" @init="init"></project-item>
    </el-drawer>
    <!-- 合同信息 -->
    <el-drawer title="合同信息" :visible.sync="contractShow" size="70%" center :destroy-on-close="true"
      :wrapperClosable="false">
      <contract-item :contract-params="contractParams" @cancel="cancel" @init="init">
      </contract-item>
    </el-drawer>
    <!-- 软硬件信息 -->
    <el-drawer title="软、硬件信息" :visible.sync="deviceShow" size="70%" center :destroy-on-close="true"
      :wrapperClosable="false">
      <device-item :device-params="deviceParams" @cancel="cancel" @init="init"></device-item>
    </el-drawer>
    <!-- 购买服务信息 -->
    <el-drawer title="购买服务信息" :visible.sync="serveShow" size="70%" center :destroy-on-close="true"
      :wrapperClosable="false">
      <serve-item :serve-params="serveParams" @cancel="cancel" @init="init"></serve-item>
    </el-drawer>
    <!-- 审核意见 -->
    <el-dialog title="审核信息" :visible.sync="verifyShow" width="30%" @cancel="cancel" :destroy-on-close="true">
      <el-input v-model="verifyParams.ensure_check_msg" placeholder="保障部门审核意见" clearable type="textarea" :rows="5">
      </el-input>
      <span slot="footer">
        <el-button type="danger" size="default" @click="verifyShow = false">关闭</el-button>
        <el-button type="primary" size="default" @click="verifySave">保存</el-button>
      </span>
    </el-dialog>

  </div>
</template>
<script>
import ProjectItem from '@/components/Project'
import ContractItem from '@/components/Contract'
import DeviceItem from '@/components/ItUsual/Device'
import ServeItem from '@/components/ItUsual/Serve'
import { f_buildType, f_ITtypeRename, f_runType } from '@/utils/filters.js'
export default {
  name: 'EnsureIt',
  components: {
    ProjectItem, ContractItem, DeviceItem, ServeItem
  },
  props: {
    switch: {
      type: Boolean,
      default: () => {
        return false
      }
    }
  },
  data () {
    return {
      offsetHeight: document.documentElement.clientHeight - 320,
      cinfo: {},
      titleData: {},
      tableType: '1',
      loading: false,
      saveLoading: false,
      tableDataAll: [],
      deviceShow: false,
      deviceParams: {},
      serveShow: false,
      serveParams: {},
      serachlist: {},
      projectShow: false,
      projectParams: {},
      contractShow: false,
      contractParams: {},
      checkSwitch: false,
      verifyShow: false,
      verifyParams: {},
      tableList: [
        { id: 'device_name', label: '设备（系统名称）', width: '200', type: true },
        { id: 'status', label: '资产运行状态', width: '120', type: false },
        { id: 'device_type', label: '资产类型', width: '150', type: true },
        { id: 'device_model', label: '设备系统型号', width: '110', type: false },
        { id: 'purchase_time', label: '购置时间', width: '100', type: false },
        { id: 'purchase_price', label: '总购置价格', width: '100', type: true },
        { id: 'guarantee_time', label: '过保时间', width: '100', type: false },
        { id: 'manufacturer', label: '制造商', width: '100', type: false },
        { id: 'contactor', label: '承建商', width: '100', type: false },
        { id: 'service_type', label: '服务分类', width: '150', type: true },
        { id: 'service_content', label: '服务内容', width: '200', type: true },
        { id: 'serve_start_date', label: '运维开始时间', width: '110', type: true },
        { id: 'serve_end_date', label: '运维结束时间', width: '110', type: true },
        { id: 'device_num', label: '数量', width: '80', type: true },
        { id: 'service_pre_amount', label: '总运维资金预算', width: '120', type: true },
        // { id: 'third_check_amount', label: '咨询机构审核金额', width: '140', type: true },
        { id: 'buy_type', label: '采购方式', width: '100', type: false },
        { id: 'ensure_check_msg', label: '保障部门审核意见', width: '150', type: true },
        // { id: 'internal_check_msg', label: '内设部门审核意见', width: '150', type: true },
        // { id: 'third_check_msg', label: '第三方机构审核意见', width: '150', type: true },
        // { id: 'govern_check_msg', label: '电子政务部审核意见', width: '150', type: true },
      ]
    }
  },
  created () {
  },
  mounted () {
  },
  methods: {
    async init () {
      // 缓存
      this.cinfo = JSON.parse(sessionStorage.getItem("verifyInfo"));
      // 信息
      const res = await this.$http('findProjectOfficeList', {
        contract_id: this.cinfo.contract_id
      })
      this.cinfo.uname = res[0].name
      this.cinfo.pname = res[0].project_name
      this.cinfo.pid = res[0].project_id
      this.cinfo.cname = res[0].contract_name
      this.cinfo.cid = res[0].contract_id

      this.loading = true
      const res1 = await this.$http('inputItList', {
        del_flag: '0',
        contract_id: this.cinfo.contract_id,
        ...this.serachlist
      })
      this.tableDataAll = res1
      this.loading = false
    },
    cancel () {
      this.projectShow = false
      this.projectParams = {}
      this.contractShow = false
      this.contractParams = {}
      this.deviceShow = false
      this.deviceParams = {}
      this.serveShow = false
      this.serveParams = {}
    },
    projectInfo () {
      this.projectShow = true
      this.projectParams = {
        pid: this.cinfo.pid,
      }
    },
    contractInfo () {
      this.contractShow = true
      this.contractParams = {
        cid: this.cinfo.cid,
      }
    },
    toBack () {
      this.$emit('toIndex', this.switch);
    },
    search () {
      this.init()
    },
    deviceInfo (id) {
      this.deviceShow = true
      this.deviceParams = {
        deviceId: id,
      }
    },
    serveInfo (id) {
      this.serveShow = true
      this.serveParams = {
        serveId: id,
      }
    },
    verifyMessage (item) {
      let ids = []
      ids.push(item.id)
      this.verifyParams = {
        ids: ids,
        ensure_check_msg: item.ensure_check_msg
      }
      this.verifyShow = true
    },
    verifyMessages () {
      let selecTable = this.$refs.tableData.selection
      let ids = []
      if (selecTable.length < 1) {
        this.$tips.error('请选择多条信息')
        return
      } else {
        selecTable.forEach(item => {
          ids.push(item.id)
        })
        this.verifyParams = {
          ids: ids,
          ensure_check_msg: ''
        }
      }
      this.verifyShow = true
    },
    async verifySave () {
      const res = await this.$http('inputItUpbatch', {
        del_flag: '0',
        ids: this.verifyParams.ids,
        level: '2',
        ensure_check_msg: this.verifyParams.ensure_check_msg
      })
      this.$tips.success(res.errmsg)
      this.verifyShow = false
      this.verifyParams = {}
      this.init()
    }
  },
  computed: {
    tableData () {
      let all = this.tableDataAll
      let hard = []
      let sort = []
      let serve = []
      this.tableDataAll.forEach(item => {
        if (item.device_type) {
          if (item.device_type.substr(2, 1) === '1') {
            hard.push(item)
          } else if (item.device_type.substr(2, 1) === '2') {
            sort.push(item)
          }
        } else {
          serve.push(item)
        }
      })
      if (this.tableType === '1') {
        return all
      } else if (this.tableType === '2') {
        return sort
      } else if (this.tableType === '3') {
        return hard
      } else if (this.tableType === '4') {
        return serve
      }
    },
    tableSwitch () {
      return this.switch
    }
  },
  filters: {
    f_buildType: f_buildType,
    f_ITtypeRename: f_ITtypeRename,
    f_runType: f_runType
  }
}
</script>
<style lang='scss' scoped>
// 解决element-ui table表格 动态计算bug
// 方法1
// ::v-deep .el-table__body-wrapper {
//   height: calc(100% - 44px) !important;
// }
// 缺点，表头高度固定了
// 方法2 ：height  改成 ：max-height
// 缺点，定义的最大高度，table 表格不能撑开
</style>
